<template >
    <el-row justify="space-between" class="row-style">
        <el-col :span="item.span" v-for="(item,index) in props.dataObj" :key="item.title" class="statistic-item">
            <el-statistic :value="item.value">
                <template #prefix v-if="item.title.indexOf('额') != -1">￥</template>
                <template #suffix v-if="item.title.indexOf('电量') != -1">度</template>
            </el-statistic>
            <div class="statistic-footer">{{item.title}}</div>
        </el-col>
    </el-row>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props=defineProps<{dataObj:{title:string,value:number,span:number}[]}>()

</script>

<style scoped lang="scss">
.row-style{
    border: 1px solid #E7E7E7;
    border-radius: 3px 3px 3px 3px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 16px;
    .statistic-item:not(last-child){
        border-right:1px solid #D6D6D6
    }
}
.el-divider--vertical{
    height: auto;
} 
.statistic-footer{
    font-weight: 600;
    color: #333333;
}
.el-statistic {
  --el-statistic-content-font-size: 28px;
  --el-statistic-content-color:rgba(54, 110, 244, 1);
  --el-statistic-content-font-weight:800;
  --el-statistic-content-font-family:'PingFang SC-Medium'
}
@media screen and (max-width: 1440px) {
    .el-statistic{
        --el-statistic-content-font-size: 26px;
    }
}
@media screen and (max-width:1024px) {
    .el-statistic{
        --el-statistic-content-font-size: 16px;
    }
}

</style>